<template>
   <div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="swiper1">
         <van-swipe :autoplay='3000' indicator-color="white" :height="180">
         <van-swipe-item><router-link to='/panasonic' tag='div' class="spec1"><img src="../assets/b1.gif" alt=""></router-link></van-swipe-item>
         <van-swipe-item><router-link to='/hottop' tag='div' class="spec1"><img src="../assets/b2.gif" alt=""></router-link></van-swipe-item>
         <van-swipe-item><router-link to='/nasdi' tag='div' class="spec1"><img src="../assets/b3.gif" alt=""></router-link></van-swipe-item>
         <van-swipe-item><router-link to='/superhealth' tag='div' class="spec1"><img src="../assets/b4.gif" alt=""></router-link></van-swipe-item>
         </van-swipe>
      </div>
      <div class="adv" @click="tab()">
         <img src="../assets/p1.gif" alt="">
      </div>
      <div class="classify">
         <ul>
            <li @click="c1()">
               <a href="javascript:;">
                  <em>
                     <van-icon name="shop-o" />
                  </em>
                  <span>限时拼团</span>
               </a>
            </li>
             <li @click="c2()">
               <a href="javascript:;">
                  <em>
                     <van-icon name="hot-o" />
                  </em>
                  <span>热销排行</span>
               </a>
            </li>
             <li  @click="c3()">
               <a href="javascript:;">
                  <em>
                     <van-icon name="discount" />
                  </em>
                  <span>今日特价</span>
               </a>
            </li>
             <li  @click="c4()">
               <a href="javascript:;">
                  <em>
                     <van-icon name="new-o" />
                  </em>
                  <span>新品派对</span>
               </a>
            </li>
             <li @click="c5()">
               <a href="javascript:;">
                  <em>
                     <van-icon name="video-o" />
                  </em>
                  <span>视频闪购</span>
               </a>
            </li>
         </ul>
         <h2>-    就这样划算 金色收获季    -</h2>
         <div class="cla-con">
            <section>
               <div @click="go1()">
                  <img src="../assets/a1.gif" alt="">
               </div>
               <div @click="go2()">
                  <img src="../assets/a2.gif" alt="">
               </div>
            </section>
            <aside>
               <div @click="go3()">
                  <img src="../assets/a3.gif" alt="">
               </div>
               <div @click="go4()">
                  <img src="../assets/a4.gif" alt="">
               </div>
               <div @click="go5()">
                  <img src="../assets/a5.gif" alt="">
               </div>
            </aside>
         </div>
      </div>
     <div class="live">
        <div class="l-top">
            <span>TV直播</span> 
       <em><van-icon name="add-o" /> 节目录 </em>
        </div>
        <div class="live-con">
           
               <dl>
                   <dd>
                       <img src="../assets/p2.gif" alt="" style="width:400px">
                   </dd>
                   <dt>
                        <h2>{{pname1}}</h2>
                         <p><span>￥233</span><em><van-icon name="phone-o" /></em><b>查看更多</b></p>
                  </dt>
               </dl>

               <dl>
                   <dd>
                       <img src="../assets/p2.gif" alt="" style="width:400px">

                   </dd>
                   <dt>
                        <h2>{{pname2}}</h2>
                         <p><span>￥335</span><em><van-icon name="phone-o" /></em><b>查看更多</b></p>
                  </dt>
               </dl>
          
         
        </div>
        <div class="live-adv">
           <div class="live-adv-wrap">
             <router-link tag='div' to=''> <img src="../assets/z5.gif" alt="" style="width:100%" height="100%"></router-link>
           </div>
           
          <div class="live-adv-wrap">
             <router-link tag='div' to='/newgoods'><img src="../assets/z6.gif" alt="" style="width:100%" height="100%"></router-link>
              
           </div>
        </div>
        <div class="live-dtime">
           <div class="live-dtime-con">
              <div class="dtime">
                  <p>
                     <span>限时抢购</span> <em>20点场</em> <span>距结束
                     <van-count-down :time="time">
                     <template v-slot="timeData">
                     <span class="item">{{ timeData.hours }}</span>
                     <span class="item">{{ timeData.minutes }}</span>
                     <span class="item">{{ timeData.seconds }}</span>
                     </template>
                     </van-count-down></span>
                  </p>
               </div>
           <div class="dtime-buy">
              <div class="dtime-buy1" v-for="(item,i) in arr3" :key="i">
                 <img :src="item.pimg" alt="">
                 <span>￥{{item.pprice}}</span>
                 <span></span>
              </div>
           </div>
           </div>
           <div class="live-time-adv">
               <div class="live-time-adv-wrap">
                  <router-link tag='div' to='/Olayshow'> <img src="../assets/z7.gif" alt="" style="width:100%" height="100%"></router-link>
               </div>
               <div class="live-time-adv-wrap">
                  <router-link tag='div' to='/thatsit1'> <img src="../assets/z8.gif" alt="" style="width:100%" height="100%"></router-link>
               </div>
           </div>
        </div>
      <div class="todey-focus" >
         <h2><span>今日关注</span></h2>
         <div class="todey-focus-con">
            <figure v-for="(item,i) in arr" :key="i" @click="detail(item.pid)">
               <img :src="item.pimg" alt="">
               <figcaption>
                  <h3>{{item.pname}}</h3>
                  <p>￥{{item.pprice}}</p>
               </figcaption>
            </figure>
         </div>
      </div>
      <div class="hot-buy">
         <h2><span>人气团购</span> <em  @click="more1">更多<van-icon name="arrow" /></em></h2>
         <div class="hb-adv1">
            <div class="hb-adv1-wrap">
              <router-link to='' tag='div'><img src="../assets/z9.gif" alt="" style="width:100%" height="100%"></router-link> 
            </div>
            <p><span>22</span>人购买 / 剩余 <em>09：01</em></p>
         </div>
         <div class="hb-group">
             <div class="hb-adv2">
               <div class="hb-adv2-wrap">
              <router-link to='' tag='div'><img src="../assets/z10.gif" alt="" style="width:100%" height="100%"></router-link> 
               </div>
               <p><span>741</span>人购买 / 剩余 <em>09：01</em></p>
            </div>
            <div class="hb-adv2">
               <div class="hb-adv2-wrap">
              <router-link to='' tag='div'><img src="../assets/z11.gif" alt="" style="width:100%" height="100%"></router-link> 
               </div>
               <p><span>741</span>人购买 / 剩余 <em>09：01</em></p>
            </div>
         </div>
         <div class="hb-list">
             <figure v-for="(item,i) in arr1" :key="i" @click="detail(item.pid)">
               <img :src="item.pimg" alt="">
               <figcaption>
                  <h3>{{item.pname}}</h3>
                  <p>￥{{item.pprice}}</p>
               </figcaption>
            </figure>
            
         </div>
      </div>
      <div class="ex-activities">
         <h2>特惠活动</h2>
         <div class="ex-activities-adv">
            <div class="ex-activities-adv1-wrap">
              <router-link to='/olayshow' tag='div'><img src="../assets/z12.gif" alt="" style="width:100%" height="100%"></router-link> 
            </div>
            <div class="ex-activities-adv2-wrap" style="margin-right:6px">
              <router-link to='/superhealth'  tag='div'><img src="../assets/z13.gif" alt="" style="width:100%" height="100%"></router-link>                
            </div>
            <div class="ex-activities-adv2-wrap">
              <router-link to=''  tag='div'><img src="../assets/z14.gif" alt="" style="width:100%" height="100%"></router-link>                             
            </div>
         </div> 
      </div>        
      <div class="swiper-spec">
         <h2>大牌驾到</h2>
         <div class="major-brand">
            <van-swipe  indicator-color="white" :height="250" >
         <van-swipe-item >
            <div class="swiper-spec-wrap">
               <img src="" alt="">
            </div>
            <div class="swiper-spec-bottom">
               <dl>
                  <dd>
                     <img src="" alt="">
                  </dd>
                  <dt>
                   <p>品鉴生活 清新享受</p>
                   <p>山水丝绸品牌专场</p>
                  </dt>
               </dl>
            </div>
         </van-swipe-item>
         <van-swipe-item >
            <div class="swiper-spec-wrap" style="background:blue">
               <img src="" alt="">
            </div>
            <div class="swiper-spec-bottom">
               <dl>
                  <dd>
                     <img src="" alt="">
                  </dd>
                  <dt>
                   <p>品鉴生活 清新享受</p>
                   <p>山水丝绸品牌专场</p>
                  </dt>
               </dl>
            </div>
         </van-swipe-item>
         <van-swipe-item >
            <div class="swiper-spec-wrap" style="background:green">
               <img src="" alt="">
            </div>
            <div class="swiper-spec-bottom">
               <dl>
                  <dd>
                     <img src="" alt="">
                  </dd>
                  <dt>
                   <p>品鉴生活 清新享受</p>
                   <p>山水丝绸品牌专场</p>
                  </dt>
               </dl>
            </div>
         </van-swipe-item>
        <van-swipe-item >
            <div class="swiper-spec-wrap" style="background:gray">
               <img src="" alt="">
            </div>
            <div class="swiper-spec-bottom">
               <dl>
                  <dd>
                     <img src="" alt="">
                  </dd>
                  <dt>
                   <p>品鉴生活 清新享受</p>
                   <p>山水丝绸品牌专场</p>
                  </dt>
               </dl>
            </div>
         </van-swipe-item>
         </van-swipe>

         </div>
      </div>
         
      <div class="globe-good">
          <h2><span>全球好物</span> <em>更多<van-icon name="arrow" /></em></h2>
         <div class="globe-good-wrap">
            <img src="../assets/1-1.gif" alt="" style="width:100%" height="100%">
            
         </div>
         <p class="globe-text">优质铝线材质 久用不变型</p>
         <div class="globe-good-con">
             <figure v-for="(item,i) in arr2" :key="i" @click="detail(item.pid)">
               <img :src="item.pimg" alt="">
               <figcaption>
                  <h3>{{item.pname}}</h3>
                  <p>￥{{item.pprice}}</p>
               </figcaption>
            </figure>
         </div>
      </div>
      <div class="more-goods">
         <h2>更多水心好物</h2>
         <ul class="more-goods-con">
            <li v-for="(item,i) in list" :key="i" @click="detail(item.pid)">
               <div class="more-good-wrap">
                  <img :src="item.pimg" alt="">
               </div>
               <h3>{{item.pname}}</h3>
               <p>￥{{item.pprice}}</p>
            </li>
             
         </ul>
      </div>
     </div>
    </van-pull-refresh>
    </div> 
</template>

<script>
import * as api from '../../api/getproductlist'
export default {
   name:'P1',
   data(){
      return{
         time:8*60*60*1000,
         videolist:[],
         pname1:'',
         pname2:'',
         vsrc1:'',
         vsrc2:'',
         list:[],
         arr:[],
         arr1:[],
         arr2:[],
         arr3:[],
         isLoading: false
      }
   },
   methods:{
      tab(){
         this.$router.push('/offlineact')
      },
      onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 500);
    },
      c1(){
         this.$router.push('/assemble')
      },
      c2(){
         this.$router.push('/rank')

      },
      more1(){
         this.$router.push('/p3')
      }
      ,
      c3(){
         this.$router.push('/bargain')

      }
      ,
      c4(){
         this.$router.push('/newgoods')

      }
      ,
      c5(){
         this.$router.push('/videobuy')

      },
      go1(){
         this.$router.push('/advancesale')
      }
      ,
      go2(){
         this.$router.push('/cutprice')
      }
      ,
      go3(){
         this.$router.push('/thatsit1')
      }
      ,
      go4(){
         this.$router.push('/thatsit2')
      }
      ,
      go5(){
         this.$router.push('/olayshow')
      },
        detail(id){
            this.$router.push('/detailpro/'+id)
        }
   },
   beforeMount(){
      api.getvideo({}).then(data=>{
         this.videolist=data.data.data;
         this.pname1=this.videolist[0].pname;
         this.pname2=this.videolist[1].pname;
         this.vsrc1=this.videolist[2].pvideo;
         this.vsrc2=this.videolist[2].pvideo

      })

   },
   mounted(){
      api.getclasspro({classid:1}).then(data=>{
         this.list=data.data.data
      })
       api.getclasspro({classid:2}).then(data=>{
        this.arr=data.data.data
         this.arr=this.arr.slice(0,6)
      })
       api.getclasspro({classid:1}).then(data=>{
        this.arr2=data.data.data
         this.arr2=this.arr2.slice(10,16)
      })
       api.getkindpro({classid:1,kindid:2}).then(data=>{
        this.arr1=data.data.data
         this.arr1=this.arr1.slice(0,6)
      })
      api.gettjpro({}).then(data=>{
        this.arr3=data.data.data
         this.arr3=this.arr3.slice(0,3)

      })
   }

}
</script>

<style scoped>
.swiper-spec h2{
   margin: 0;
   height: 40px;
   line-height: 40px;
   padding-left: 12px
}
.swiper-spec-wrap{
   height: 180px;
   background: pink
}
.swiper-spec-bottom{
   height:65px;
}
.swiper-spec-bottom dl{
   display: flex;
   margin: 0;
   align-items: center;
   height: 100%;
   padding-left:6px ;
 
}
.swiper-spec-bottom dl dd{
   width: 60px;
   height: 40px;
   background: #000;
   margin: 0;
   margin-right: 40px
}
.swiper-spec-bottom dl dt p:first-child{
   font-size: 14px;
   font-weight: 600;
}
.swiper-spec-bottom dl dt p:last-child{
   font-size: 10px;

}
.more-goods-con .more-good-wrap{
   width: 100%;
   height: 130px;
   margin-top: 15px;
   margin-bottom: 15px
}
.more-goods-con .more-good-wrap img{
   display: inline-block;
     width: 100%;
   height: 100%;
   background: red
}
.more-goods-con {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.more-goods-con li h3,p{
   margin: 0
}
.more-goods-con li p{
   width: 100%;
   text-align: left;
   color: red;
   font-size: 12px;
   height: 30px;
}
.more-goods-con li h3{
     width:100%;
    word-break:break-all;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-weight: normal;
    color: #323232;
    margin-bottom: 10px
}
.more-goods-con li{
   width: 50%;
   border: 1px solid #f3f3f3;
   height: 230px;
   padding: 10px 6px;
   box-sizing: border-box;
   border-right:0;
   margin-top:-1px ;
   display: flex;
   flex-direction: column;
   align-items: center;
  justify-content:start;
  padding-bottom: 0
}
.more-goods-con li:nth-child(odd){
   border-left:0 
}
.more-goods{
   background: #fff;
   margin-top: 10px
}
.more-goods h2{
   margin: 0;
   height: 40px;
   line-height: 40px;
   padding-left: 18px

}
.globe-good-con figure{
   margin-right: 10px;
   flex: 0 0 auto
}
.globe-good-con{
   background: #fff;
   padding: 0 18px;
   display: flex;
   overflow: auto;
   flex-wrap: nowrap
}
.globe-text{
   padding-left: 18px;
   font-size: 10px;
   color:#666;
   background: #fff;
   padding-bottom: 15px
}
.globe-good-wrap{
   width: 100%;
   background: blue;
   height: 80px;
}
.globe-good {
   height: 285px;
   background: #fff;
   margin-top: 10px;
}
.globe-good h2,p{
   margin: 0;
}
.globe-good h2{
   background: #fff;
   padding:0 18px;
   height: 40px;
   line-height: 40px;
   display: flex;
   justify-content: space-between
}
.globe-good h2 em{
   font-size: 12px;
   font-style: normal;
   display: flex;
   align-items: center;
   color: #666
}

.major-brand .van-swipe-item:first-of-type{
   background: red;
   position: relative;
}
.major-brand .van-swipe-item:nth-of-type(2){
   background: yellow;
    position: relative;
}
.major-brand .van-swipe-item:nth-of-type(3){
   background: silver;
    position: relative;
}
.major-brand .van-swipe-item:nth-of-type(4){
   background: cyan;
    position: relative;
}

.major-brand{
     background: #f3f3f3;
   padding:12px;
   padding-bottom: 0;
   padding-top: 0
}
.major-brand h2,p{
   margin: 0
} 
.ex-activities-adv2-wrap{
     width: 49%;
   background: bisque;
   height: 130px;
   border-radius: 10px;
   overflow: hidden;
   float: left;
   margin-top: 5px
}

.ex-activities-adv1-wrap{
   width: 100%;
   background: blue;
   height: 165px;
   border-radius: 10px;
   overflow: hidden;
}
.ex-activities-adv{
   width: 100%;
   height: 215px;
   margin-top: 10px
}
.ex-activities{
   background: #fff;
   margin-top: 10px;
   padding:12px;
   padding-bottom: 0;
   height: 345px
}
.ex-activities h2,p{
   margin:0; 
}
.hb-list{
   display: flex;
   overflow: auto;
   flex-wrap: nowrap;
   margin-top: 15px
}
 figure{
   margin: 0;
   width: 32%;
   margin-bottom: 5px;
   flex: 0 0 auto;
   margin-right: 2px
}
 figure img{
   width: 100%;
   height: 80px;
   background: greenyellow;
   display: inline-block
}
 figure h3,p{
   margin:0
}
 figure h3{
   font-size: 10px;
   line-height: 20px;
   font-weight:400;
}
 figure p{
   color: red;
   height: 20px;
   line-height: 20px;
   font-size: 14px
}
.hb-adv2 p{
   font-size: 10px;
   padding-left: 5px;
   color: #666
}
.hb-adv2 p span{
   color: red
}
.hb-adv2-wrap{
    width: 100%;
   height: 115px;
   background: pink;
   overflow: hidden;
   border-radius: 10px 10px 0 0 
}
.hb-group{
   height: 105 px;
   margin-top: 8px;
   display: flex;
   justify-content: space-between
}
.hb-group .hb-adv2{
   width: 49%;
    box-shadow:1px 3px 3px  orange;
   border-radius: 10px;
   margin-top:8px;
}
.hb-adv1 p{
   font-size: 10px;
   padding-left: 5px;
   color: #666
}
.hb-adv1 p span{
   color: red
}
.hb-adv1{
   width: 100%;
  box-shadow:0px 3px 3px  red;
   border-radius: 10px;
   margin-top:8px;
   margin-bottom: 5px
}
.hb-adv1-wrap{
    width: 100%;
   height: 155px;
   background: pink;
   overflow: hidden;
   border-radius: 10px 10px 0 0 
}
.hot-buy em{
   font-style: normal;
   color: #000;
   font-weight: 500;
}
.hot-buy{
   background: #fff;
   padding: 12px;
   margin-top: 10px;
}
.hot-buy h2,p{
   margin: 0
}
.hot-buy h2{
   display: flex;
   align-items: center;
   justify-content: space-between
}
.hot-buy h2 em{
   font-size: 12px;
   font-style: normal;
   display: flex;
   align-items: center;
   font-weight: normal;
}
.todey-focus-con{
   display: flex;
   padding: 0 12px;
   justify-content: space-between;
   flex-wrap: wrap
}
.todey-focus-con figure{
   margin: 0;
   width: 32%;
   margin-bottom: 5px
}
.todey-focus-con figure img{
   width: 100%;
   height: 80px;
   background: red;
   display: inline-block
}
.todey-focus-con figure h3,p{
   margin:0
}
.todey-focus-con figure h3{
   font-size: 10px;
   line-height: 20px;
   font-weight:400;
}
.todey-focus-con figure p{
   color: red;
   height: 20px;
   line-height: 20px;
   font-size: 14px
}
.todey-focus{
   background: #fff;
   margin-top: 10px;
   padding: 5px
}
.todey-focus h2{
   margin: 0;
   padding: 0 12px;
   margin-bottom: 5px;
   height: 30px;
   line-height: 30px
}
.live-time-adv{
   margin: 10px;
   display: flex;
   justify-content: space-between
}
.live-time-adv .live-time-adv-wrap{
   width: 49%;
   height: 120px;
   background:pink;
   border-radius: 10px
}
.dtime-buy{
   display: flex;
   margin-top: 5px;
   justify-content: space-between
}
.live-dtime-con{
   height: 135px;
   background: #faf1f1;
   margin: 10px;
   padding: 3px;
   box-sizing: border-box;
   border-radius: 10px
}
.dtime-buy .dtime-buy1{
   width: 90px;
   height: 90px;
   border-radius:50%;
   background:#fff;
    position: relative;
}
.dtime-buy .dtime-buy1 span{
   position: absolute;
   bottom: 10px;
   right: 0;
   color: red;
   font-size: 10px

}
.live-dtime{
     background: #fff;
     
     overflow: hidden;
    
}
.dtime-buy img{
   display: inline-block;
   width: 62px;
   height: 62px;
   background: orange;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto
}
.dtime{
   height: 30px;
 
}
.dtime p{
   margin: 0;
   display: flex;
}
.dtime p span:first-child{
   font-size: 14px;
   margin-left: 5px
}
.dtime p em{
   width: 60px;
   height: 20px;
   display: block;
   border-radius: 10px;
   background: red ;
   margin-left: 5px;
   line-height: 20px;
   text-align: center;
   color: #fff;
   font-style: normal;
   margin-right: 110px

}
.dtime p  .van-count-down{
   display: inline-block
}
 .dtime p  .van-count-down .item {
  display: inline-block;
  width: 15px;
  margin-right: 5px;
  color: #ffff;
  font-size: 12px;
  text-align: center;
  background-color: #000;
}
.swiper1 .van-swipe-item:first-child{
  background: red
}
.swiper1 .van-swipe-item:nth-of-type(2){
  background: orange
}
.swiper1 .van-swipe-item:nth-of-type(3){
  background: black
}
.swiper1 .van-swipe-item:nth-of-type(4){
  background: blue
}

.spec1 {
   height: 100%;
   width: 100%; 
}
.spec1 img{
   height: 100%;
   width: 100%; 
}
  
.adv{
   height: 100px;
   background: pink
}
.adv img{
   display: inline-block;
   width: 100%;
   height: 100%;
}
.classify{
   height: 375px;
   background:#fcf1df;
     padding: 0 6px;
}
.classify ul {
   height: 80px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top:10px;
   box-sizing: border-box
}
.classify ul li a{
   display: flex;
   flex-direction:column;
   align-items: center
}
.classify ul li a em{
   display: block;
   width: 40px;
   height:40px;
   background: red;
   border-radius: 50%;
   line-height: 40px;
   text-align: center
}
.classify ul li a span{
   margin-top: 14px;
   color: #000
}
.classify ul li .van-icon{
   font-size: 24px;
   margin-top: 8px;
   color: #fff
}
.classify h2{
   text-align: center;
   font-weight: normal;
   font-size: 14px;
   height: 30px;
   line-height: 30px
}
.classify  .cla-con{
   height: 170px;
}
.classify  .cla-con img{
   width: 100%;
   height:100%;
}
.classify  .cla-con section{
   width: 49%;
   float: left;
}
.classify  .cla-con section div:first-child{
   height: 150px;
   background: blue;
   margin-bottom: 3px
}
.classify  .cla-con section div:last-child{
   margin-top: 5px;
   height: 85px;
   background: pink
}
.classify  .cla-con aside{
   width: 49%;
   float: right;
}
.classify  .cla-con aside div:first-child{
   height: 76px;
   background: yellow;
}
.classify  .cla-con aside :nth-of-type(2){
   height: 76px;
   background: blue;
   margin-top: 5px
}

.classify  .cla-con aside div:last-child{
   margin-top: 5px;
   height: 76px;
   background: pink
} 
   

.l-top{
   padding: 0 6px;
   font-weight: 600;
   font-size: 14px;
    display: flex;
    height: 40px;
    line-height: 40px;
   align-items: center;
   justify-content: space-between;
}
.l-top em{
   width: 70px;
   height: 20px;
   text-align: center;
   line-height: 20px;
   background: #fff;
   font-style: normal;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 6px;
   box-sizing: border-box;
   font-size: 12px
}
.l-top em .van-icon{
   color: red
}
.live-con dl{
   margin: 0;
   background: #fff;
   padding-bottom: 10px;
   margin-bottom: 10px
}
.live-con dl dd {
  height: 170px;
  margin: 0;
  margin-bottom: 5px
}
.live-con dl dt{
   padding: 0 12px
}
.live-con dl dt h2{
   margin: 0;
   height: 34px;
   line-height: 34px;
   font-size: 12px;
   margin-bottom: 10px
} 
.live-con dl dt p{
   margin: 0;
   display: flex;
   align-items: center
}
.live-con dl dt p span{
   color: red;
   font-size: 14px;
   margin-right: 190px
}
.live-con dl dt p em{
  display: block;
  width: 35px;
  height: 20px;
  border: 1px solid red;
  font-style: normal;
  box-sizing: border-box;
  margin-right: 13px;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
  color: red;
  border-radius: 3px
}
.live-con dl dt p b{
   width: 80px;
   height: 20px;
   background: red;
   line-height: 20px;
   text-align: center;
   color: #fff;
   font-weight: normal;
}
.live-adv{
   padding: 12px;
   padding-top: 0;
   padding-bottom: 0;
   display: flex;
   justify-content: space-between;
   align-items: center
}
.live-adv .live-adv-wrap{
   width: 48%;
   height: 100px;
   background: red;
   border-radius: 5px;
   overflow: hidden;
}

</style>